<!--
* @description 危险排行top5
* @author zywu
* @date 2021/01/09 10:47:30
!-->
<template>
	<div class="week-dangerous-leaderboard">
		<div class="content-top-title">
			<p class="title-text">本{{periodName}}最危险单位排名</p>
			<p class="title-desc">按本{{periodName}}“告急”总时长计算</p>
		</div>
		<div class="dangerous-leaderboard-content">
			<ul id="dangerousList">
				<li v-for="(item,i) in dataList" :key="i" class="dangerousList-item d-flex ai-center">
							<div class="item-number">
								<div class="item-num-div">{{i + 1}}</div>
							</div>
							<div class="item-desc">
								<p>{{item.orgName }}</p>
								<p>{{item.desc }}</p>
							</div>
							<van-progress :percentage="item.time/dataList[0].time*100" track-color="#fff" color="#3B82D6" stroke-width="10" :show-pivot="false" />
						</li>
						<div v-if="dataList.length==0" class="no-data-img">
					<img width="100%" height="100%" src="/ilink-app-h5-zd/static/img/ilink_1566461028161.png"/></div>
			</ul>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		reportData: {
			type: Object,
			default: function () {
				return {}
			},
		},
		period: {
			type: [Number, String],
			default: '',
		},
		periodName: {
			type: String,
			default: '',
		},
	},
	data() {
		return {
			dataList:[]
		}
	},

	components: {},

	computed: {},

	created() {
		var data=this.reportData
		this.dataList=data.dangerTop5.splice(0,5);
	},

	mounted() {
					
	},

	methods: {},
}
</script>
<style lang='scss'>
</style>